<template>
  <div class="error_page">
    <img src="../assets/img/error.png">
    <p class="title">抱歉，暂无权限访问</p>
    <p class="tip">请联系管理员提升权限或换号重试</p>
    <div class="btns">
      <span @click="logoutPage">重新登录</span>
      <span @click="comeback">返回上一页</span>
    </div>
  </div>
</template>

<script>
import {logout} from "../api/user";

export default {
  methods: {
    // 退出
    logoutPage() {
      logout().then((res) => {
        localStorage.clear();
        this.$router.push('/');
      }).catch((e) => {
      })
    },

    // 返回
    comeback() {
      this.$router.go(-2);
    }
  }
}
</script>

<style scoped>
.error_page {
  text-align: center;
  position: fixed;
  top: 50%;
  margin-top: -220px;
  left: 0;
  right: 0;
}

.error_page .title {
  color: #427EF1;
  font-size: 22px;
  margin-bottom: 30px;
}

.error_page .tip {
  color: #333;
  font-size: 16px;
}

.error_page img {
  width: 300px;
}

.btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

.error_page .btns span {
  display: inline-block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #427EF1;
  border: 2px solid #427EF1;
  border-radius: 30px;
  margin-top: 40px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.btns span:first-child {
  margin-right: 30px;
  background: #ffffff;
  color: #427EF1;
}
</style>
